﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MemberCard.aspx.cs" Inherits="WISD.CarFriend.Web.Admin.OA.MemberCardManage.MemberCard" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>会员卡管理</title>
    <link href="../../Content/CSS/ClientCSS/qlsale.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/CSS/ClientCSS/Table.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/CSS/ClientCSS/blue.css" rel="stylesheet" type="text/css" />
    <script src="/Admin/Scripts/ClientScripts/Page.js" type="text/javascript"></script>
    <script src="/Admin/Scripts/ClientScripts/CodyyForm.js" type="text/javascript"></script>
    <script src="/Admin/Scripts/ClientScripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="/Admin/Scripts/DatePicker/WdatePicker.js" type="text/javascript"></script>
    <script src="/Admin/Scripts/ClientScripts/SplitPage.js" type="text/javascript"></script>
    <script src="/Admin/Scripts/ClientScripts/jquery.artDialog.min.js" type="text/javascript"></script>
</head>
<body>
    <div style="height: auto;">
        <table class="adduser" align="center" border="0" cellpadding="0" cellspacing="0"
            width="100%" bgcolor="#F2F7F5">
            <tbody>
                <tr>
                    <td colspan="5" class="bigTitle" height="40">
                        <strong>会员卡管理</strong>
                    </td>
                </tr>
                <tr>
                    <td class="sctitle" style="width: 81px;">
                        会员卡号：
                    </td>
                    <td style="width: 162px;">
                        <input id="txtMemberCardID" class="xstxt" type="text" />
                    </td>
                    <td class="sctitle" style="width: 50px;"></td>
                    <td class="sctitle" style="width: 81px;">
                        会员编号：
                    </td>
                    <td>
                        <input id="txtMemberID" class="xstxt" type="text" />
                    </td>
                </tr>
                <tr>
                    <td class="sctitle" style="width: 81px;">
                        会员姓名：
                    </td>
                    <td style="width: 162px;">
                        <input id="txtName" class="xstxt" type="text" />
                    </td>
                    <td class="sctitle" style="width: 50px;"></td>
                    <td class="sctitle" style="width: 81px;">
                        会员卡类型：
                    </td>
                    <td>
                        <select id="SelMemberLevel">
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="sctitle" style="width: 90px;">
                        会员卡状态：
                    </td>
                    <td colspan="4">
                        <select id="SelState">
                            <option value="">--会员卡状态--</option>
                            <option value="1">正常</option>
                            <option value="2">挂失</option>
                            <option value="3">冻结</option>
                            <option value="4">未审核</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="5" class="fenline">
                        &nbsp;
                        <input value="搜索" class="twobtn" type="button" id="btnSearch" />&nbsp;&nbsp;
                        <input class="twobtn" value="新增" type="button" id="btnAdd" />&nbsp;
                    </td>
                </tr>
                <tr>
                    <td colspan="5">
                        <table rules="all" class="tableStyle">
                            <thead>
                                <tr>
                                    <th scope="col" style="display: none;">
                                        序号
                                    </th>
                                    <th scope="col">
                                        会员卡号
                                    </th>
                                    <th scope="col">
                                        会员编号
                                    </th>
                                    <th scope="col">
                                        会员姓名
                                    </th>
                                    <th scope="col">
                                        会员卡类型
                                    </th>
                                    <th scope="col">
                                        入会日期
                                    </th>
                                    <th scope="col">
                                        到会日期
                                    </th>
                                    <th scope="col">
                                        剩余金额
                                    </th>
                                    <th scope="col">
                                        会员卡状态
                                    </th>
                                    <th scope="col">
                                        消费项目
                                    </th>
                                    <th scope="col">
                                        操作
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="databody">
                            </tbody>
                            <tfoot id="footer" class="div_footer">
                            </tfoot>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="registerdiv" class="registerdiv"  style="width: 750px;">
        <table class="addTable" align="center" border="0" cellpadding="0" cellspacing="0"
            width="100%">
            <tbody>
                <tr class="topTitle">
                    <td colspan="4" style="margin-top: -3px;">
                        <ul>
                            <li class="leftli">添加会员卡</li>
                            <li class="rightli" onclick="$('#registerdiv').hide();">
                                <img alt="关闭" title="关闭" id="close" src="/Admin/Content/Images/tdClose_Hover.png" /></li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td class="sctitle_four">
                        会员卡号：
                    </td>
                    <td colspan="3">
                        <input id="txtMemberCardID1" name="MemberCardID" class="stxt" type="text" reg="\w+" needcheck="yes"
                            tip="['会员卡号不能为空','只能为数字字母下划线','长度在1-50之间']" scope="1,50" clear="yes" />
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="sctitle_four">
                        会员编号：
                    </td>
                    <td colspan="3">
                        <input id="txtMemberID1" name="MemberID" class="stxt" type="text" reg="[\u4e00-\u9fa5a-zA-Z0-9]+" needcheck="yes"
                            tip="['会员编号不能为空','只能为中英文','长度在1-50之间']" scope="1,50" clear="yes" />
                        <span></span>
                        <input value="查询" class="twobtn" type="button" id="btnQuery" />
                    </td>
                </tr>
                <tr>
                    <td class="sctitle_four">
                        姓名：
                    </td>
                    <td>
                        <input id="txtName1" name="Name" class="stxt" type="text" clear="yes" disabled="disabled" />
                    </td>
                    <td class="sctitle_four">
                        移动电话：
                    </td>
                    <td>
                        <input id="txtMobileTel" name="MobileTel" class="stxt" type="text" clear="yes" disabled="disabled" />
                    </td>
                </tr>
                <tr>
                    <td class="sctitle_four">
                        车牌号码：
                    </td>
                    <td>
                        <input id="txtVehicleNo" name="VehicleNo" class="stxt" type="text" clear="yes" disabled="disabled" />
                    </td>
                    <td class="sctitle_four">
                        车 型：
                    </td>
                    <td>
                        <input id="txtVehicleStyle" name="VehicleStyle" class="stxt" type="text" clear="yes" disabled="disabled" />
                    </td>
                </tr>
                 <tr>
                    <td class="sctitle_four">
                        会员卡类型：
                    </td>
                    <td>
                        <select id="SelMemberLevel1">
                        </select>
                    </td>
                    <td class="sctitle_four">
                        入会日期：
                    </td>
                    <td>
                        <input id="txtAdmissionDate" name="AdmissionDate" onclick="WdatePicker()" class="stxt" type="text"
                            reg="^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$" needcheck="yes" tip="['','入会日期格式不对']" clear="yes"
                            allownull="yes" />
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="sctitle_four">
                        到期日期：
                    </td>
                    <td>
                        <input id="txtExpirationDate" name="ExpirationDate" onclick="WdatePicker()" class="stxt" type="text"
                            reg="^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$" needcheck="yes" tip="['到期日期不能为空','到期日期格式不对']" clear="yes" />
                        <span></span>
                    </td>
                    <td class="sctitle_four">
                        会员卡密码：
                    </td>
                    <td>
                        <input id="txtPwd" name="Pwd" class="stxt" type="password" reg="^[A-Za-z0-9_-]+$" needcheck="yes"
                            tip="['会员卡密码不能为空','只能为数字字母下划线','长度在1-50之间']" scope="1,50" clear="yes" />
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="sctitle_four">
                        剩余金额：
                    </td>
                    <td>
                        <input id="txtResidualAmount" name="ResidualAmount" class="stxt" type="text" reg="^[0-9]\d*$"
                            value="0" needcheck="yes" tip="['剩余金额不能为空','只能为整数']" clear="yes" allownull="yes" />
                        <span></span>
                    </td>
                    <td class="sctitle_four">
                        会员卡状态：
                    </td>
                    <td>
                        <select id="SelState1">
                            <option value="1">正常</option>
                            <option value="2">挂失</option>
                            <option value="3">冻结</option>
                            <option value="4">未审核</option>
                        </select>
                    </td>
                </tr>              
                <tr>
                    <td colspan="4" style="height: 15px;">
                    </td>
                </tr>
                <tr>
                    <td colspan="4" align="center" style="text-align: center;">
                        <input value="修改" id="btnEdit" class="twobtn" type="button" />&nbsp;&nbsp;
                        <input value="保存" id="btnSave" class="twobtn" type="button" />&nbsp;&nbsp;
                        <input id="btnRest" class="twobtn" value="重置" type="button" />
                    </td>
                </tr>
                <tr>
                    <td colspan="4" style="height: 15px;">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="clientdiv" style="margin: 0 auto; width: 800px; overflow: hidden; display: block;
        border: 1px solid gray; display: none;">
        <table class="adduser" align="center" border="0" cellpadding="0" cellspacing="0"
            width="100%" bgcolor="#F2F7F5">
            <tbody>
                <tr>
                    <td colspan="5" class="bigTitle" height="40">
                        <strong>查找会员</strong>
                    </td>
                </tr>
                <tr>
                    <td class="sctitle" style="width: 81px;">
                        会员编号：
                    </td>
                    <td style="width: 162px;">
                        <input id="txtMemberID2" class="xstxt" type="text" />
                    </td>
                    <td class="sctitle" style="width: 50px;"></td>
                    <td class="sctitle" style="width: 81px;">
                        会员姓名：
                    </td>
                    <td>
                        <input id="txtName2" class="xstxt" type="text" />
                    </td>
                </tr>
                <tr>
                    <td class="sctitle" style="width: 81px;">
                        移动电话：
                    </td>
                    <td style="width: 162px;">
                        <input id="txtMobileTel2" class="xstxt" type="text" />
                    </td>
                    <td class="sctitle" style="width: 50px;"></td>
                    <td class="sctitle" style="width: 81px;">
                        车牌号码：
                    </td>
                    <td>
                        <input id="txtVehicleNo2" class="xstxt" type="text" />
                    </td>
                </tr>
                <tr>
                    <td class="sctitle" style="width: 81px;">
                        是否开卡：
                    </td>
                    <td colspan="4">
                        <select id="SelIsCard2">
                            <option value="">---请选择---</option>
                            <option value="1">是</option>
                            <option value="0">否</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="5" class="fenline">
                        <input value="搜索" class="twobtn" type="button" id="btnMemberQuery" />
                    </td>
                </tr>
                <tr>
                    <td colspan="5">
                        <table rules="all" class="tableStyle">
                            <thead>
                                <tr>
                                    <th scope="col">
                                        序号
                                    </th>
                                    <th scope="col">
                                        会员编号
                                    </th>
                                    <th scope="col">
                                        姓名
                                    </th>
                                    <th scope="col">
                                        性别
                                    </th>
                                    <th scope="col">
                                        移动电话
                                    </th>
                                    <th scope="col">
                                        车牌号码
                                    </th>
                                    <th scope="col">
                                        车型
                                    </th>
                                    <th scope="col">
                                        是否开卡
                                    </th>
                                    <th scope="col">
                                        操作
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="dialogTableBody">
                            </tbody>
                            <tfoot id="dialogTableFoot" class="div_footer">
                            </tfoot>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="cosumeDiv" style="margin: 0 auto; width: 800px; overflow: hidden; display: block;
        border: 1px solid gray; display: none;">
        <table class="adduser" align="center" border="0" cellpadding="0" cellspacing="0"
            width="100%" bgcolor="#F2F7F5">
            <tbody>
                <tr>
                    <td class="bigTitle" height="40">
                        <strong>会员卡消费项目</strong>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table rules="all" class="tableStyle">
                            <thead>
                                <tr>
                                    <th scope="col">
                                        序号
                                    </th>
                                    <th scope="col">
                                        会员卡编号
                                    </th>
                                    <th scope="col">
                                        会员卡类型
                                    </th>
                                    <th scope="col">
                                        消费项目
                                    </th>
                                    <th scope="col">
                                        消费次数
                                    </th>
                                    <th scope="col">
                                        剩余消费次数
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="consumeTableBody">
                            </tbody>
                            <tfoot id="consumeTableFoot" class="div_footer">
                            </tfoot>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
<script type="text/javascript">
    var rs = {};
    var MainPK = "";
    var Condition = "";
    var CurrentPage = 1;
    var artDialog;

    //赋值操作
    function EditEntity() {
        var rs = Page.Static.Rs[0];
        $("#txtMemberCardID1").val(rs["MemberCardID"]);
        $("#txtMemberID1").val(rs["MemberID"]);
        $("#txtName1").val(rs["Name"]);
        $("#txtMobileTel").val(rs["MobileTel"]);
        $("#txtVehicleNo").val(rs["VehicleNo"]);
        $("#txtVehicleStyle").val(rs["VehicleStyle"]);
        $("#SelMemberLevel1").val(rs["MemberLevel"]);
        $("#txtAdmissionDate").val(rs["AdmissionDate"].split(" ")[0]);
        $("#txtExpirationDate").val(rs["ExpirationDate"].split(" ")[0]);
        $("#txtPwd").val(rs["Pwd"]);
        $("#txtResidualAmount").val(rs["ResidualAmount"]);
        $("#SelState1").val(rs["State"]);
    };

    //添加修改记录
    var setEntity = function (obj) {
        var Result = Form.Validator({ id: "registerdiv" });
        if (Result) {
            var _$ = function (id) { return document.getElementById(id); };
            var data = {
                Action: obj.Action
                    , MemberCardID: $.trim($("#txtMemberCardID1").val())
                    , MemberID: $.trim($("#txtMemberID1").val())
                    , MemberLevel: $.trim($("#SelMemberLevel1").val())
                    , AdmissionDate: $.trim($("#txtAdmissionDate").val())
                    , ExpirationDate: $.trim($("#txtExpirationDate").val())
                    , Pwd: $.trim($("#txtPwd").val())
                    , ResidualAmount: $.trim($("#txtResidualAmount").val())
                    , State: $.trim($("#SelState1").val())
            };
            if (obj.Action == "EditEntity") { data["Main"] = obj.Main; }
            $.post("/Admin/Control/MemberCard.ashx", data, function (data) {
                if (data.split(",")[0] === "Success") {
                    if (obj.Action == "AddEntity") {
                        alert("添加成功!");
                        Condition = GetCondition();
                        CurrentPage = Page.Static.CurrentPage;
                        InitPage();
                    }
                    else {
                        alert("修改成功!");
                        Condition = GetCondition();
                        CurrentPage = Page.Static.CurrentPage;
                        InitPage();
                    }
                }
                else {
                    obj.Action == "AddEntity" ? alert("添加失败！") : alert("修改失败！"); ;
                }
            });
        }
    }

    //获取查询条件
    var GetCondition = function () {
        var MemberCardID = $("#txtMemberCardID").val() || "null"; //会员卡号
        var MemberID = $("#txtMemberID").val() || "null"; //会员编号
        var Name = $("#txtName").val() || "null"; //会员姓名
        var MemberLevel = $("#SelMemberLevel").val() || "null"; //会员卡类型
        var State = $("#SelState").val() || "null"; //会员卡状态
        return MemberCardID + "@" + MemberID + "@" + Name + "@" + MemberLevel + "@" + State;
    };

    //加载数据
    var InitPage = function () {
        Page.GetData({ "Control": "/Admin/Control/MemberCard.ashx", "Action": "Init", "first": true, "colspan": 50, "Condition": Condition, "CurrentPage": CurrentPage, "databody": "databody", "footer": "footer" });
    };

    //加载会员卡类型
    var LoadMemberCardType = function () {
        $.post("/Admin/Control/MemberCard.ashx", { "Action": "LoadMemberCardType" }, function (data) {
            if (!data) {
                $("#SelMemberLevel").html("<option value=''>--会员卡类型--</option>");
                $("#SelMemberLevel1").html("<option value=''>--无--</option>");
                return;
            }
            var jsonArr = eval("(" + data + ")");
            var optionstr = "";
            for (var i = 0; i < jsonArr.length; i++) {
                optionstr += "<option value=" + jsonArr[i]["Id"] + ">" + jsonArr[i]["MemberCardType"] + "</option>";
            }
            $("#SelMemberLevel").html("<option value=''>--会员卡类型--</option>" + optionstr).change();
            $("#SelMemberLevel1").html(optionstr).change();
        });
    };

    //重置表单
    var ResetForm = function () {
        $(".addTable").find("input[type='text'][clear='yes'],input[type='password'][clear='yes'],textarea[clear='yes']").val("");
        $(".addTable").find("input,textarea,select").attr("disabled", false);
        $("#txtResidualAmount").val("0");
        $("#txtMemberID1").attr("disabled", true);
        $("#txtName1").attr("disabled", true);
        $("#txtMobileTel").attr("disabled", true);
        $("#txtVehicleNo").attr("disabled", true);
        $("#txtVehicleStyle").attr("disabled", true);
    };

    //获取会员信息的查询条件
    var GetMemberCondition = function () {
        var MemberID = $("#txtMemberID2").val() || "null"; //会员编号
        var Name = $("#txtName2").val() || "null"; //会员姓名
        var MobileTel = $("#txtMobileTel2").val() || "null"; //移动电话
        var VehicleNo = $("#txtVehicleNo2").val() || "null"; //车牌号码
        var IsCard = $("#SelIsCard2").val() || "null";  //是否开卡
        return MemberID + "@" + Name + "@" + MobileTel + "@" + VehicleNo + "@" + IsCard;
    };

    $(function () {
        //失去焦点验证
        Form.Blur({ id: "registerdiv" });

        //第一次加载数据
        LoadMemberCardType();
        Condition = GetCondition();
        InitPage();

        //点击搜索按钮
        $("#btnSearch").click(function () {
            Condition = GetCondition();
            CurrentPage = 1;
            InitPage();
        });

        //点击新增按钮
        $("#btnAdd").click(function () {
            ResetForm();
            $("#btnSave,#btnRest").show();
            $("#btnEdit").hide();
            $(".leftli").html("添加会员卡");
            Page.divCenter($("#registerdiv")[0]);
        });

        //点击保存按钮
        $("#btnSave").click(function () {
            setEntity({ "Action": "AddEntity" });
        });

        //点击重置按钮
        $("#btnRest").click(function () {
            ResetForm();
        });

        //点击修改按钮
        $("#btnEdit").click(function () {
            setEntity({ "Action": "EditEntity", "Main": MainPK });
        });

        //在Table中点击修改、删除 
        $("#databody").click(function (e) {
            var that = this;
            var e = e || window.event;
            var target = e.srcElement || e.target;
            if ($(target).is("a")) {
                var action = $(target).attr("action");
                var main = $(target).parent().parent().attr("main");
                MainPK = main;
                if (!action.localeCompare("edit")) {    //编辑
                    ResetForm();
                    $("#txtMemberCardID1").attr("disabled", true);
                    $("#SelMemberLevel1").attr("disabled", true);
                    $("#btnSave,#btnRest").hide();
                    $("#btnEdit").show();
                    $(".leftli").html("修改会员卡");
                    var divobj = $("#registerdiv");
                    Page.divCenter(divobj[0]).GetOne({ "Main": main });
                }
                if (!action.localeCompare("delete")) {    //删除
                    if (confirm("是否确定删除该记录?")) {
                        Page.DeleteEntity({ "Main": main });
                    }
                }
                if (!action.localeCompare("consume")) {    //消费项目
                    Condition = main;
                    SplitPage.GetData({ "Control": "/Admin/Control/MemberCard.ashx", "Action": "GetMemberConsumeItem", "first": true, "colspan": 50, "Condition": Condition, "CurrentPage": CurrentPage, "PageName":"NoOperation", "databody": "consumeTableBody", "footer": "consumeTableFoot" });
                    artDialog = $.dialog({
                        title: "查询消费项目"
                        , content: document.getElementById("cosumeDiv")
                        , padding: "0"
                        , lock: true
                        , esc: true
                    });
                }
                (! -[1, ]) ? e.cancelBubble = true : e.stopPropagation();
            }
        }).dblclick(function (e) {    //双击查看详细信息
            var that = this;
            var e = e || window.event;
            var target = e.srcElement || e.target;
            if ($(target.parentNode).is("tr")) {
                var main = $(target.parentNode).attr("main");
                ResetForm();
                $("#btnEdit,#btnSave,#btnRest").hide();
                $(".addTable").find("input,textarea,select").attr("disabled", true);
                $(".leftli").html("会员卡信息");
                var divobj = $("#registerdiv");
                Page.divCenter(divobj[0]).GetOne({ "Main": main });
                (! -[1, ]) ? e.cancelBubble = true : e.stopPropagation();
            }
        });

        //点击查询会员信息按钮
        $("#btnQuery").click(function () {
            Condition = GetMemberCondition();
            CurrentPage = 1;
            SplitPage.GetData({ "Control": "/Admin/Control/MemberCard.ashx", "Action": "GetMemberData", "first": true, "colspan": 50, "Condition": Condition, "CurrentPage": CurrentPage, "databody": "dialogTableBody", "footer": "dialogTableFoot" });
            artDialog = $.dialog({
                title: "会员信息"
                , content: document.getElementById("clientdiv")
                , padding: "0"
                , lock: true
                , esc: true
            });
        });

        //点击会员信息搜索按钮
        $("#btnMemberQuery").click(function () {
            Condition = GetMemberCondition();
            CurrentPage = 1;
            SplitPage.GetData({ "Control": "/Admin/Control/MemberCard.ashx", "Action": "GetMemberData", "first": true, "colspan": 50, "Condition": Condition, "CurrentPage": CurrentPage, "databody": "dialogTableBody", "footer": "dialogTableFoot" });
        });

        $("#dialogTableBody").click(function (e) {
            var that = this;
            var e = e || window.event;
            var target = e.srcElement || e.target;
            if ($(target).is("a")) {
                var action = $(target).attr("action");
                var main = $(target).parent().parent().attr("main");
                var Arr = main.split("#");
                if (!action.localeCompare("choose")) {
                    $("#txtMemberID1").val(Arr[0]);
                    $("#txtName1").val(Arr[1]);
                    $("#txtMobileTel").val(Arr[2]);
                    $("#txtVehicleNo").val(Arr[3]);
                    $("#txtVehicleStyle").val(Arr[4]);
                    artDialog.close();
                }
                (! -[1, ]) ? e.cancelBubble = true : e.stopPropagation();
            }
        });

    });
</script>
